<template>
    <div>
      <div>
        <el-dialog
          width="35%"
          :title="title"
          :visible.sync="visible"
          :before-close="handleClose">
          <el-form ref="formData" :model="formData" :rules="rules" label-width="100px">
            <el-form-item label="类型：">
              <el-radio-group v-model="formData.ismenu">
                <el-radio :label="0">目录</el-radio>
                <el-radio :label="1">菜单</el-radio>
                <el-radio :label="3">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称：" prop="mname">
              <el-input v-model="formData.mname"></el-input>
            </el-form-item>
            <el-form-item label="路由地址：" prop="murl" v-if="formData.ismenu != 3">
              <el-input v-model="formData.murl"></el-input>
            </el-form-item>
            <el-form-item label="接口地址：" v-if="formData.ismenu == 1 || formData.ismenu == 3">
              <el-input v-model="formData.compant"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="formData.remark">
              </el-input>
            </el-form-item>
          </el-form>
          <el-row style="margin-top:17px; ">
            <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="visible=false">取 消</el-button>
            <el-button style="float:right" size="mini" type="primary" @click="submitForm('formData')">确 定</el-button>
          </el-row>
        </el-dialog>
      </div>

      <div>
        <el-dialog
          width="35%"
          :title="title"
          :visible.sync="bianji"
          :before-close="handleClose">
          <el-form ref="formData" :model="updformData" :rules="rules" label-width="100px">
            <el-form-item label="类型：">
              <el-radio-group v-model="updformData.ismenu" disabled="true">
                <el-radio :label="0">目录</el-radio>
                <el-radio :label="1">菜单</el-radio>
                <el-radio :label="3">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称：" prop="mname">
              <el-input v-model="updformData.mname"></el-input>
            </el-form-item>
            <el-form-item label="路由地址：" prop="murl" v-if="updformData.ismenu != 3">
              <el-input v-model="updformData.murl"></el-input>
            </el-form-item>
            <el-form-item label="接口地址：" v-if="updformData.ismenu == 1 || updformData.ismenu == 3">
              <el-input v-model="updformData.compant"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="updformData.remark">
              </el-input>
            </el-form-item>
          </el-form>
          <el-row style="margin-top:17px; ">
            <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="bianji=false">取 消</el-button>
            <el-button style="float:right" size="mini" type="primary" @click="submitForm2('updformData')">确 定</el-button>
          </el-row>
        </el-dialog>
      </div>


      <div>
        <el-form :inline="true" size="mini">
          <el-form-item label="菜单名称：">
            <el-input v-model.trim="pagess.mname"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
            <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
            <!--<el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addSubMmenu(1)">添加</el-button>-->
          </el-form-item>
        </el-form>
      </div>

      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="mid"
            label="序号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="mname"
            label="菜单名称"
            width="180">
          </el-table-column>
            <el-table-column
            prop="murl"
            label="路由地址">
          </el-table-column>
          <el-table-column
            prop="compant"
            label="接口地址">
          </el-table-column>
          <el-table-column
            prop="ismenu"
            label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.ismenu==0">目录</span>
              <span v-if="scope.row.ismenu==1">菜单</span>
              <span v-if="scope.row.ismenu==3">按钮</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注">
          </el-table-column>
          <el-table-column
            prop="cz"
            label="操作"
          width="300px">
            <template slot-scope="scope">
              <!--<el-button size="mini" type="danger" round plain  @click="del(scope.row.rid)">删除</el-button>-->

              <el-button type="primary"  round plain size="mini" icon="el-icon-circle-plus-outline" @click="addSub(scope.row)":disabled="scope.row.ismenu==3">添加</el-button>
              <!--v-if="scope.row.ismenu!=3"-->
              <el-button size="mini" type="primary" round plain  @click="handlesz(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="pagess.currentPage"
          :page-sizes="[10, 15, 20, 25,30]"
          :page-size="pagess.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagess.total">
        </el-pagination>

      </div>




    </div>
</template>
<script>
  import qs from 'qs'
  export default {
    data() {
      return {
        updformData:{},
        bianji:false,
        visible:false,
        formData:{
          mpid:0,
          ismenu:0,
          rowmpid:'',
          // mname:'',
          // murl:'',

        },
        mid:'',
        tableData:[],
        pagess:{
          currentPage:1,
          pagesize:10,
          total:0,
          mname:'',
          compant:'',
          remark:''
        },
        Nopagess:[],
      }
    },
    methods:{
      handleCurrentChange1(val){
        this.pagess.currentPage=val;
        this.query();
      }
      ,handleSizeChange1(val){
        this.pagess.pagesize=val;
        this.query();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 === 0) {
          return 'warning-row';
        } else if (rowIndex%2 === 1) {
          return 'success-row';
        }
        return '';
      },
      handleCheck(){
        this.pagess.currentPage=1;
        this.query();
      },
      //重置按钮
      handleReset(){
        this.pagess.mname='';
      },
      //查询
        query(){
        this.$axios.post("http://localhost:8899/education-system-roles/demo/t-premission/queryAll",qs.stringify(this.pagess)).then(r=>{
          //alert(JSON.stringify(r))

          this.tableData=r.data.obj;

        })
          this.$axios.post("http://localhost:8899/education-system-roles/demo/t-premission/count",qs.stringify(this.pagess)).then(r=>{
            this.pagess.total=r.data.obj;
          })
      },
      //添加
      addSub(obj){
        this.visible=true;
        this.mid=obj.mid;
        this.formData.rowmpid=obj.mpid;

      },
      //没有分页的查询
      // queryNOpages(){
      //   this.$axios.get("http://localhost:8078/demo/t-premission/queryAllNOpages").then(r=>{
      //     this.Nopagess=r.data;
      //    alert(JSON.stringify(this.Nopagess.mid));
      //
      //   })
      // },
      //添加确定按钮
      submitForm(formData){
        this.$axios.get("http://localhost:8899/education-system-roles/demo/t-premission/querymname?mname="+this.formData.mname).then(r=>{

          if(r.data.obj){
            this.$message.error("名称已经存在了哦！！")
          }else{
            // //判读是否使目录
            if(this.formData.ismenu==0){

                      if(this.formData.mname!=null){
                              //若是目录  默认mpid为0
                              this.$axios.post("http://localhost:8899/education-system-roles/demo/t-premission/inserpre",qs.stringify(this.formData)).then(r=>{
                                this.$message.success("添加成功！");
                                if(r.data.obj==1){
                                  this.visible=false;
                                 this.query();
                                 this.formData= {mpid:0, ismenu:0, rowmpid:''}
                               }
                              })
                      }else{
                        this.$message.error("名字不能为空哦！")
                      }

            }
            if(this.formData.ismenu==1){
                  //若mpid为0时 则不能添加按钮
              //alert(JSON.stringify(this.formData.rowmpid))
                              //若不是目录  默认mpid为    this.formData.mpid=this.mpid;（）
                              this.formData.mpid=this.mid;
                              if(this.formData.mname!=null){
                                this.$axios.post("http://localhost:8899/education-system-roles/demo/t-premission/inserpre",qs.stringify(this.formData)).then(r=>{
                                  alert(JSON.stringify(r.data));
                                  if(r.data.obj==1){
                                   this.visible=false;
                                    this.$message.success("添加成功！");
                                    this.query();
                                    this.formData= {mpid:0, ismenu:0, rowmpid:''}
                                }
                                })
                        }else{
                          this.$message.error("名字不能为空哦！")
                        }

            }
            if(this.formData.ismenu==3){
                      if(this.formData.rowmpid==0){
                          this.$message.error("目录不能添加按钮哦！")
                      }else {
                        this.formData.mpid=this.mid;
                        if(this.formData.mname!=null){
                          this.$axios.post("http://localhost:8899/education-system-roles/demo/t-premission/inserpre",qs.stringify(this.formData)).then(r=>{
                            alert(JSON.stringify(r.data));
                           if(r.data.obj==1){
                              this.visible=false;
                              this.$message.success("添加成功！");
                              this.query();
                             this.formData= {mpid:0, ismenu:0, rowmpid:''}
                           }
                          })
                        }else{
                          this.$message.error("名字不能为空哦！")
                        }
                      }
            }
          }
        })
      },
      //编辑
      handlesz(obj){
        this.bianji=true;
        this.updformData=obj;
      },
      submitForm2(updformData){
        //alert(JSON.stringify(this.updformData));
        this.$axios.post("http://localhost:8899/education-system-roles/demo/t-premission/updform",qs.stringify(this.updformData)).then(r=>{
              if(r.data.obj){
                this.bianji=false;
                this.$message.success("修改成功");
                this.query();
              }
        })
      },

    },
    created(){
    this.query();
    },
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-pagination{
    text-align: center;
  }
</style>
